#vue js events tutorial

[laravelvuejs]

Vue JS 2 Tutorial #24 – Events (child to parent) Hey gang, in this Vue JS tutorial I'll introduce you to events, and how we can use them to pass data from a child component to a parent component in reaction to ... source

[geekymindsblog]

#RevisitJS Day 6

Different types of loops in JavaScript.

Follow @geekymindsblog for updates.

Support GeekyMinds

If you want to support our work, all you have to do is complete the following developer survey by DevEconomics!

Survey Link:

[codesolutionsstuff]

Laravel 8 Install Bootstrap Example Tutorial

In this blog, we will talk about Laravel 8 install bootstrap 4. you can see how to install bootstrap 4 in Laravel 8. In the event that you have a question about how to utilize bootstrap in Laravel 8, I will give basic model with the arrangement. You’ll learn Laravel 8 npm install bootstrap 4. You will do the accompanying things for install bootstrap for Laravel 8.Assuming you are a novice with Laravel 8, I can assist you with installing bootstrap 4 in Laravel 8. it’s an exceptionally basic approach to install utilizing Laravel ui author bundle. Laravel ui bundle add Laravel 8 help.Laravel ui gives an approach to install bootstrap, vue, and react setup. they additionally give auth framework to login and enlist. Laravel 8 furnish a simple approach to work with bootstrap, vue and react.For installation of bootstrap 4 in your Laravel 8 projects then you have to install the following Laravel ui composer package to get the command:Composer require Laravel/ui After effectively install above bundle then we are prepared to install bootstrap 4 with our application.we can install two way, one is a straightforward bootstrap 4 setup install and another is install bootstrap 4 with auth. So how about we see both way.Install Bootstrap 4php artisan ui bootstrapInstall Bootstrap 4 with authphp artisan ui bootstrap --authNext we installed bootstrap, and you can watch your resource directory js folder. You also have to install npm and run it. so let’s run both command:Install NPMnpm install Run NPMnpm run dev In this way, you can work with your bootstrap 4 apps. You can use it as given bellow:

This is example from CodeSolutionStuff.com

I hope you will like the content and it will help you to learn Laravel 8 Install Bootstrap Example Tutorial If you like this content, do share. Read the full article

[bloggerkhushi]

General InformationAll DocumentationRealm DocumentationDeveloper Articles & TopicsCommunity ForumsBlog

MERN Stack Explained MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js frontend framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any frontend JavaScript framework can work. Ready to take the next step? Setup your free Atlas account by clicking below and try our MERN Stack Tutorial to create a full-stack MERN application in no time. Get started free

What is the MERN Stack? MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

MongoDB - document database

Express(.js) - Node.js web framework

React(.js) - a client-side JavaScript framework

Node(.js) - the premier JavaScript web server

Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through. How does the MERN stack work? The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON. React.js Front End The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple Components, connect them to data on your backend server, and render them as HTML. React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles you’d expect from a modern web framework: great support for forms, error handling, events, lists, and more. Express.js and Node.js Server Tier The next level down is the Express.js server-side framework, running inside a Node.js server. Express.js bills itself as a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is. Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses. By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front-end, you can connect to Express.js functions that power your application. Those functions in turn use MongoDB’s Node.js drivers, either via callbacks for using Promises, to access and update data in your MongoDB database. MongoDB Database Tier If your application stores any data (user profiles, content, comments, uploads, events, etc.), then you’re going to want a database that’s just as easy to work with as React, Express, and Node. That’s where MongoDB comes in: JSON documents created in your React.js front end can be sent to the Express.js server, where they can be processed and (assuming they’re valid) stored directly in MongoDB for later retrieval. Again, if you’re building in the cloud, you’ll want to look at Atlas. If you’re looking to set up your own MERN stack.

Appwars Technologies is the India's fastest growing company in the field of Educational Workshop, On Campus Training, Professional Training & Corporate Training with most advanced technologies & experience in hand.APPWARS TECHNOLOGIES provides various courses and internship programs which are free of cost. It helps you to explore yourself and help to increase your skills and provide you the best opportunities for the job. In future it's really helpful for you to get a job and a great career opportunity.

For further information please go through the below given link 👇👇

No. 1 Training Company In Noida - Appwars Technologies APPWARS Technologies is the India’s fastest growing company in the field of Educational Workshop, On Campus Training and Professional Training & Corporate Training with most advanced technologies & experience in hand. https://appwarstechnologies.com/

[marlinpaul]

React JS Tutorial for Beginners | What is React JS and Why use React JS?

What is React JS?

It's a JavaScript library for creating user interfaces, to put it simply. Let's start with the fundamentals before moving on to the rest of the React JS course. There are two words in this definition: javascript library and user interface. Let's have a look at what these terms signify.

The library is a collection of pre-written code that is efficient, complicated, well-written, and easily accessible. As a result, it simplifies our lives and allows us to use code written by others with ease.

Assume we wish to find the cosine value of 20. Rather of obsessing over how this library was created, we simply use the math library. For instance, Math.cos (20).

The user interface is what the user sees right away.

React JS is a powerful tool that breaks down a page into many building elements known as components, allowing for fast front-end development.

React JS pre-requisites

There are some prerequisites to bear in mind before we plunge into the depths of our React JS Tutorial. We need a fundamental understanding of HTML, CSS, and JavaScript because these are the cornerstones of any frontend development and are required to become an expert.

1. HTML

(Hypertext Markup Language) is an acronym for Hypertext Markup Language.

It's a markup language used to make web pages and documents.

Tags for Beginners:

div> span>: div> span> is a tag that is used to organise elements.

form>: to create a form that will be used to collect data from users.

input>: specifies what and how users' input should be collected.

button>: creates a button and specifies the functions that will be executed when the button is clicked.

2. CSS

Cascading Style Sheet (CSS) is an acronym for Cascading Style Sheets (CSS).

It's in charge of the website's appearance and feel.

You can apply styling to HTML items that you've selected.

Syntax at a High Level:

selector{property1 : value1; property2 : value2; property3 : value3;}

CSS has three main selectors: selectors, selectors, and selectors, selectors.

In an HTML document, id(#) is unique.A group of elements is referred to as a class(.).-Box Model Tag(tag name) – all tags of a specific tag name

Every constituent is given the shape of a rectangular box.Four edges make up each box.Border Padding Padding Padding Padding Padding Padding Padding Padding PaddingOther features, such as colours, fonts, and backgrounds, must also be well-understood.

3, JavaScript

Arrays

Objects

Functions

Control Flow Statements

DOM Manipulation

DOM Events

Closure

Prototype

OOPs

With this in mind, you can ensure that the rest of the

React JS Tutorial

is clear to you.

Why use React JS?

We can move on to the next level of the React JS tutorial now that you know what React is and why we utilise it.

In front-end development, React is a strong and widely used tool.

React is more popular than Vue and Angular, which are competitors. The fact that React is a library is one of the key reasons for its success. As a result, as compared to Angular, which is a framework, you have more control over the application's flow.

The components that aid in optimization can be easily reused. In comparison to Angular and Vue, React has an extremely low learning curve. React is used by some of the world's most well-known companies, including Facebook, Netflix, PayPal, Tesla, and others.

When we create a single-page application, we can see the full benefits of React. React developers have more job opportunities than Angular developers.

Single Page Application

Multiple server requests were sent with multiple reloading in the traditional system. This resulted in lower performance, increased bandwidth, and increased processing time. Single-page apps, on the other hand, make only one request to the server, and the server responds as the data is re-written.

Components make up the entirety of the web page. Virtual DOM locates the component that needs to be reloaded and updates that item in the actual DOM without reloading all of the webpage's components.

Single-page applications save time and bandwidth while also improving performance. Gmail, Facebook, and Twitter are examples of SPA.

JSX

JavaScript XML is abbreviated as JSX.

It's utilised by React to allow HTM and JavaScript code to coexist.

In the past, we used to include JavaScript in HTML. However, using JSX, you may now use HTML in JavaScript.

https://www.phptpoint.com/reactjs-tutorial/

[shahriarsagor]

How to telescope installation and configuration in laravel?

Hello to all! Now in this article, i will talk about laravel telescope installation. i will use how to install telescope laravel? So in this article i will goes to detailed descriptive on telescope installation and configuration step by step. I will look at example of telescope installation and configuration. So Let’s start with laravel telescope tutorial.

So now in this tutorial, i will show you how to telescope installation and configuration in laravel 5.8 ,laravel 6, laravel 7 and laravel 8 version.

Laravel Telescope is a debug assistant for laravel project. Whenever you will write code it is very hard to debug and find the error in your application manually. Telescope will provides access to the requests coming into your application, exceptions, log entries, database queries, model watch, catch, redis, queued jobs, mail, scheduled tasks and more in one place.

So, now here i will give you a very simple step of how to install telescope in your laravel app and also how it looks after install.

Read Also : PHP AngularJS CRUD with Search and Pagination Example From Scratch

Install Laravel Telescope Package

Install telescope for with following command:

composer require laravel/telescope

you can also install for specific environment:

composer require laravel/telescope --dev

Read Also : How to Autocomplete Textbox in Laravel 8 with Ajax?

Install Telescope

after install this package, we have to also install telescope by using following command that will create migration files and configuration file.

php artisan telescope:install

now let’s run following command to create tables for telescope.

php artisan migrate

now you are ready to run telescope. so let’s run project:

php artisan serve

open bellow url

localhost:8000/telescope/requests

Read Also : How to Get Selected Option Text in Vue JS ?

What features provide by telescope?

Requests

Commands

Schedule

Jobs

Batches

Cache

Dumps

Events

Exceptions

Gates

Logs

Mail

Models

Notifications

Queries

Redis

Views

Thanks For reading. Hope it will help you . Also you can follow us on Facebook

[t-baba]

A way to look up JavaScript operators

#514 — November 13, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

10 Insights From Adopting TypeScript At Scale — A fantastic writeup (from a TC39 member, no less) of how Bloomberg (the financial media company) adopted TypeScript and now has 2,000 full-time JavaScript engineers. Curiously we also learn that Bloomberg also have their own JavaScript runtime built around the V8 engine.

Rob Palmer (TC39 and Bloomberg)

A Way to Look Up JavaScript Operators — Quick, name as many operators as you can! Got to about ten or so? This site covers about fifty with a quick explanation of each (well, except the bitwise ones).

Josh W Comeau

The Most Complete Spreadsheet Solution for JavaScript Apps — New Release: Fast enterprise JavaScript spreadsheet for delivering true spreadsheet experiences. Learn more about SpreadJS v14 including native Excel I/O, Calc Engine with 450+ functions and more. Download a free trial or view the online demos.

SpreadJS by GrapeCity, Inc. sponsor

Angular 11 Released — Are you one of the allegedly 1.7 million developers using Angular? Maybe experimental webpack 5 support, faster builds, improved hot module replacement support, and automatic inlining of fonts can tempt you onto the latest version.

Mark Techson (Google)

Babylon.js 4.2 Released: Powerful 3D Rendering Engine — Babylon.js is a particularly powerful 3D rendering engine aimed at artists, game developers, and anyone with 3D ideas to explore. New to 4.2 is a new particle editor, sprite editor, texture inspector, and more. See the playground if you want a quick play.

Babylon.js

'No More Free Work from Marak' — The creator of faker.js (a library for creating dummy data) pushing back against supporting businesses for free with his open source work has become a cause célèbre in the past week. “Pay me or fork this,” he says. Whatever your take, the topic of work vs reward in open source will remain both important and divisive.

Marak X

⚡️ Quick bytes:

We've not had time to go through them yet, but VueConf Toronto has released a lot of talk videos from their recent online conference.

Replay is a React-inspired JavaScript game engine and they're having a game jam starting today and running for a week.

Windows user? The Windows Terminal Preview 1.5 release may interest you.

The TypeScript team have written up some notes on TypeScript's release process.

📚 Tutorials, Opinions and Stories

Rethinking the JavaScript Pipeline Operator — Dan concludes “I hope that TC39 decides to reject this proposal” but it’s interesting to see how he reaches that conclusion.

Dan Shappir

Understanding Modules and import and export Statements — Modular programming demands, well, modules, and JavaScript now has built-in support for these and here’s the basics of their operation.

Tania Rascia

Is Your JavaScript Testing Stack Holding You Back? — Learn how to boost your productivity with the ultimate development workflow.

Wallaby.js sponsor

Things I Don’t Like About Vue.js (as a React Engineer) — Well, we love Vue, but to be fair to Harry, he did write What Vue.js Does Better Than React recently too ;-)

Harry Wolff

Back to Basics: Event Delegation — Events don’t just occur on the element you apply them to. Instead they go all the way down the DOM tree to the event and back up again. Christian demonstrates where this can help you out.

Christian Heilmann

How to Detect When a Sticky Element Gets Pinned — …thanks to the IntersectionObserver API.

David Walsh

Live Workshop: Getting Started with OpenTelemetry in Node.js

Lightstep sponsor

▶  How to Recreate Tic Tac Toe with HTML, CSS, and JavaScript James Q Quick

You're Probably Not Using Promise.All Enough Sam Jarman

How to Create a Commenting Engine with Next.js and Sanity Bryan Robinson

▶  My VS Code Setup: Must Have Configurations and Shortcuts James Q Quick

🛠 Code & Tools

Mermaid: Markdown-'ish' Syntax for Generating Flowcharts, Sequence Diagrams, and More — Being able to ‘draw’ diagrams in a structured, text-based and have them render into something presentable is pretty appealing.

Knut Sveidqvist

jsdiff: A JavaScript Text Diffing Implementation — Can compare strings for differences in various ways including creating patches for the changes. The library is quite mature but just reached version 5.0. There’s an online demo too.

Kevin Decker

core-js 3.7.0: A Modular Standard Library and Polyfills for JS — A popular collection of polyfills covering ECMAScript features up to ES2021 level. The project has had some interesting problems recently, but releases are now flowing again.

Denis Pushkarev

CodeFix - Automatically Clean Up Technical Debt

CodeFix sponsor

React Frontload 2.0: Simple Full-Stack Data Loading for React — Do full stack data loading and state management inline in React components by writing a data loader in your component (with a hook) and it ‘just works’ with SSR and in the browser.

David Nicholas Williams

Running Vue.js in a Web Worker? — A promising prototype of running Vue.js in a Web Worker so that work is offloaded to a background thread with updates being sent back to the main thread asynchronously.

Jerzy Głowacki

Dexie.js: A Minimalistic IndexedDB Wrapper — IndexedDB is a widely supported browser API for data storage and Dexie aims to make it simpler to use (and will offer an approach for server syncing too.)

David Fahlander

Microsoft Edge Tools for VS Code — Use the Microsoft Edge Tools from within VS Code to see your site’s runtime HTML structure, alter its layout, fix styling issues as well as see your site’s network requests.

Visual Studio Marketplace

ShareDB 1.5: Realtime Database Backend Based on Operational Transformation — For when you need real time synchronization of JSON documents (such as for behind a real time collaboration app).

ShareJS

💻 Jobs

Senior / Intermediate Full Stack Developers (Sydney or Brisbane) — A SaaS business with phenomenal growth. True flexible working. You’ll have 5+ years in JavaScript / TypeScript, as well as production experience with AWS/Serverless.

Compono

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

👀 A Correction

The File System Access API: Simplifying Access to Local Files — Several issues ago we mistakenly referred to this API’s spec as an ‘open standard’ when it's just a spec. It's Chrome only (for now), not a W3C standard, though it remains an interesting idea. (Thanks to reader Šime Vidas for noting our mistake and noting that the path from the WICG to a W3C standard is a long one indeed!)

Pete LePage and Thomas Steiner

by via JavaScript Weekly https://ift.tt/2IzXSPs

[codetriks]

how to pass array in Post web api using ajax Jquery

how to pass array in Post web api using ajax Jquery

Hi I have written and developed this site so that students may learn computer science related technologies easily. I am committed to provide easy and in depth tutorials on various technologies. No one is perfect in this world and nothing is impossible. I give my best for you. I hope it will help you….Thanks

Codetriks is an educational website which is provide  IT Tutorial .

In IT we provide Jquery,Mvc,c#.net,Asp.net,SQL,Zendesk,Dapper,Vue Js Tutorial for beginners so learn and increase your knowledge with us.

Codetriks provide IT tutorials – Codetriks | Jquery AJAX ,Jquery Basic,Jquery Selectors,Curd Operation using Jquery,Insert using jquery,Update using Jquery,Delete using jquery,Jquery grid,Jquery JTemplate,check uncheck checkbox using jquery,jquery onclick events,jquery Insert update delete code,jquery table ,jquery css,jquery foreach function,jquery tutorial,jquery sample demo,jquery examples Our  website provide codes for every technology so please use this website. And also give me feedback how you feel.

Codetriks is a no 1 website for provide easy codes and build website very easy method. If you are a devloper then we also help you because we also provide, How to solve error and warnings so please use it and save your time and make money with us…

Thank you…

[mancdev]

VueJS & Firebase Cloud Firestore Stripped-Back - Tutorial Part 1

In this tutorial series we will explain how to start developing with the Vuejs framework & Firebase Cloud Firestore to build full-stack web applications. We’ll start from scratch by stripping everything back to the basics - no CLIs, build tools or bundlers, just a HTML page, an editor and a browser so you can get to grips with building apps with Vue & Firebase more quickly and be productive faster.

VueJS

Vuejs is now one of the big 3 Javascript frameworks in the web client ecosystem. However it’s not developed or backed by a huge corporation, it was developed by one individual, Evan You. The proliferation of JS frameworks in recent years has led to the term “Javascript Fatigue” where developers have become weary of all of the new and self-proclaimed “latest and greatest” open source frameworks. It is in this environment that Vue has emerged through all of the noise to become a major player alongside Angular and React (both backed by huge technology companies, Google and Facebook respectively). That Vue has achieved such a status in this environment backed by one individual highlights just how Vue has hit a chord with developers and is filling a gap that isn’t being met by Angular, React or other competitors like Ember and Aurelia.

Evan You is an ex-Googler who was familiar with AngularJS (often referred to as Angular 1) and used it for internal projects at Google that he was working on. He set out to achieve a framework that delivered the benefits of AngularJS but was more lightweight, faster and better suited to smaller apps that didn’t require the heavy-lifting of the huge apps that AngularJS was originally built to develop such as their Adwords platform and their internal CRM system. What he produced was a beautifully simple solution and it quickly attracted adoption as the front-end framework of choice for many PHP developers, particularly from the Laravel community.

Despite promising early adoption in some quarters, Vue may well have stayed a “me-too” framework in the ecosystem had it not been for Google’s decision to redevelop their AngularJS framework from scratch. Angular (often referred to as Angular 2) was such a departure from the original AngularJS framework that it introduced a fundamental shift in approach and required developers to learn many new concepts just to build basic apps. Developers were kept in limbo between AngularJS and Angular for almost 2 years, with many alphas and then  betas and many breaking changes and missing pieces to deal with during the transition and then no easy migration path for their existing code and apps.

There’s no doubt that, as a new framework in it’s own right, Angular is a fantastic, powerful, all-in-one next generation framework but it isn’t “Angular” as millions of developers know it. Perhaps the biggest mistake Google made was in not launching their next-gen framework under new branding. In any event and unfortunately for Google, Angular 2 was too big a change for many developers and while uptake was initially high, it hasn’t achieved the type of ongoing adoption or love as AngularJS or React and it’s clear that Vue, with many obvious similarities to the original Angular, has arrived just in time to sweep up and become a magnet for disgruntled Angular devs.

In addition, the droves of developers jumping in to the Javascript ecosystem over the past years, in their evaluation of an appropriate framework, are choosing Vue in vast numbers due to how easy it is to learn and how quickly they can start building apps. I would say that the best word to describe Vue to developers choosing a framework is “approachable” - it seductively invites you in and once there you find it’s so intuitive and simple to get productive, covering all of the bases you need, that once you’re in you tend to stick with it. For me personally I actually enjoy spending my days developing around Vue, I cannot say the same for Angular unfortunately.

In 2018, Vue is set to gain even greater momentum and overtake Angular into second place in the Javascript framework popularity chart. The main reason for this may be that the massively popular Ionic mobile and PWA framework is about to release a version that decouples it from Angular and enables developers to build apps with Ionic using any framework (or none at all). It’s interesting that this is likely to be a tipping point for Vue to achieve critical mass and yet is due to the Ionic team’s concern that Angular isn’t seeing the level of adoption anticipated and continuing to hitch their wagon to Angular is likely to hamper their own growth.

To address this, in Ionic 4, they’ve developed a framework-agnostic, web component-based edition of their mobile framework. When you look online it’s fairly clear that the majority of the delight at Ionic’s shift away from Angular is coming from those who want to use Ionic with Vue. Personally I only stuck with Angular because of Ionic despite my preference for Vue and since their announcement of Ionic 4, I have thrown myself fully into Vue. The sweet spot that Vue hits between Angular and React is in delivering a more lightweight and simple approach than Angular, focussing first and foremost on being a view renderer like React but providing optional elements that are officially supported and developed by the Vue core team, such as routing that can be easily dropped in to your app. This is what is meant when Vue is called a “progressive framework”, you can start by using as little or as much of the framework as you need, progressively using more of it’s subsidiary elements as required. Another advantage to using Vue is that it’s lightweight enough to use it in one part of your app and progressively expand it to other parts when you’re ready, for example if you have existing app in vanilla Javascript, jQuery or another framework that you want to change over to Vue piece by piece.

As mentioned, Vue’s biggest advantage is it’s simplicity and approachability. While other frameworks require knowledge of build systems, CLIs, Node, NPM etc just to start building an “Hello World” app, with Vue you can strip everything right back, open up an HTML file in an editor and get started simply without needing to spend time learning anything else. While you’ll likely want to move over to the full modern JS development environment as you get more involved, it isn’t required to get started.

Firebase Cloud Firestore

So Vue is a fantastic front-end framework but to build even the most trivial worthwhile app, we need a back-end and a data store. Like with using Vue, we want to use something that delivers simplicity and approachability yet gives us the power to build advanced apps as you become more experienced. For this project Firebase Cloud Firestore is a no-brainer to use as the database back-end. Like Vue, we can just get started using Firebase with just a basic HTML page - no need for CLIs and build tools to just start building something.

I first used Firebase back in 2014, when they were a small, private company shortly before they were acquired by Google. At the time Firebase was not a platform but a hosted realtime database and I fell in love with it immediately - for prototyping it was perfect and it’s realtime capabilities were just awe-inspiring at the time.

However Firebase did have some serious limitations that made it unsuitable for me to use as the back-end database in a production app. It didn’t allow server-side code, so all of your logic was exposed on the client and it’s database querying facilities were extremely limited. Also, as a No-SQL document database, organising relational-style data into something that was manageable without joins and queries required denormalisation and duplication of data, something which is anathema to those coming from a SQL-based relational database background. I felt it was a real shame as, despite these limitations, it was very impressive and working with it’s Javascript API was a joy.

After Google’s acquisition, Firebase was expanded into a full serverless platform allowing for storage, cloud messaging, hosting, authentication, analytics and much much more. What had been “Firebase” became the Realtime Database element of the platform. Fortunately Google started to address the limitations that I and many other developers had found with the original Firebase. First server-side code, in the form of Cloud Functions, was added which enables you to put more of your sensitive business logic code onto the server.

More recently Google introduced an alternative database to the original realtime database which they call Cloud Firestore. Cloud Firestore addresses many, but not all, of the issues with the realtime database in terms of querying and organisation of data. It still provides the full realtime capabilities that we know and love and is still a No-SQL database based on documents. However you can now organise them into Collections (similar to relational DB Tables) which enables you to perform much more advanced queries. You can have specifically defined fields each of which can have a specific type. One of these types is the Reference type which lets you store links between documents on different collections to enable a form of join. In addition Cloud Firebase enables offline usage so the user can continue to use your app even if access to the server isn’t available. There are still limitations, remembering it’s not a relational database, and full joins are not possible and neither are aggregate queries such as SUM, COUNT etc. However with 90% of the issues I had with the original Firebase realtime database now dealt with through Cloud Functions and Cloud Firestore, Firebase is now an excellent choice as the back-end, serverless platform and data store for building full-scale production apps.

OK so enough talk about the what and why, let’s get going with the how and write some code. We’re going to start, as we’ve talked about, with a single HTML page. Choose your OS, code editor and browser of choice (I’m using VSCode on OSX and highly recommend using Chrome as your browser).

Open up your editor and select to create a new file in a new folder. Just call the new file index.html. Once you’ve done this, start with a skeleton html page as shown below :

<html>

     <head>          <title>VueJS & Firebase From Scratch</title>      </head>

     <body>

     </body>

     <script>

     </script>

<html>

The first thing we’ll need to do is to import the VueJS library. We can do this with a CDN link (see below) which is placed below the closing body tag and before the opening script tag  :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

This recommended CDN link is correct at the time of writing however may change in future. To ensure it’s correct, once you’ve inserted this link into your page, save it and open it up in Google’s Chrome browser (select File from Chrome’s menu and select Open File … to navigate and select your newly created index.html file). The page will show as blank in any case however right-click on the page and select Inspect from the pop-up menu and click the Console tab. If this displays nothing eg there are no error messages then you’re good however if you do get an error complaining about the vue library then browse to https://vuejs.org/v2/guide/ and look for the link displayed under Getting Started.

We’re ready to build our app! The first thing we need to do is to create the Vue Instance Object that will be used as the core of your app.

<script>      var app = new Vue({                           el : '#app'      }) </script>

This creates a new Vue instance that we can reference throughout our html template and which contains all of the data and methods that we’ll create to develop the app. Some call it the View Model however we’ll stick to calling it the Instance Object. We simply create a new object called app from Vue and pass in an object with all of the information about our app. To begin with, we only declare a single property in this object which is el, short for element, and we assign #app. This tells Vue that any reference to an element that has the id of app is to be controlled by our Vue Instance Object.

In our html template we can now simply create a container html tag and assign it the id of app. All of the content within that tag is then controlled automatically by our Vue instance object. (Please note that any content in bold from here on in denotes new or changed content.)

<body>

     <div id=‘app’>

     </div>

</body>

Please note : Unlike AngularJS, with Vue you cannot assign the reference to the Instance Object on the body tag, you have to create your own container tag to assign it to, as in this case we’re assigning it to a div container.

Great but we’re not actually doing anything yet. Now we want to give our app some life. To do this we’ll give the app a name and display it as a title and we’ll do this as data held on the Instance object rather than write it directly on the template. To do this we’ll need to add another property called data to our instance object. The data property is an object which contains any variables you want to reference in your template or elsewhere in your app. In this case we’ll create a variable called appTitle and assign it a name. The app we’re going to build is an employee tracker that is going to be so indispensable to it’s users that it will be like magic!

<script>      var app = new Vue({                           el : '#app’,                           data : {                                       appTitle : ‘EmployeeMagic’                           }      }) </script>

We can now use the data binding features of Vue to display our new app title in our page template.

<body>

     <div id=“app”>

         <h1>{{ appTitle }}</h1>

     </div>

</body>

Save and refresh your page in Chrome and you’ll see EmployeeMagic as your app header. The double curly braces are pretty standard in most frameworks these days to denote data-binding (also called interpolation). The content inside the double-curlies is interpreted by Vue and the required content is displayed at that point in the template. In this case Vue recognises that we have a variable called appTitle in data in our Instance Object and replaces it in our template with the value contained in the variable. There are many benefits of data-binding, the main one being that any change in the variable in our instance object is automatically reflected in our template without any additional effort on our part.

So far so good but it’s a little plain-Jane so let’s add the Bootstrap library link for a bit more aesthetic to it without any extra effort. The link used below for then Bootstrap CDN was current at the time of writing however check the Bootstrap website if you have trouble with the link :

<header>      <title>EmployeeMagic</title>

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"/>

</header>

Let’s say however we want to add a margin around the app so it’s not displaying right up against the edge all the time. To do this we’ll need to add some CSS styling however we can take advantage of a cool Vue feature which lets us set our styles programatically.

Let’s add another variable to our data object which is specifically for styles, let’s call it mainStyle. This will be an object so that we can assign as many different CSS style settings as we like. For now we just want to assign a margin of 20 pixels :

<script>      var app = new Vue({                           el : ‘#app’,                           data : {                                      appTitle : ‘EmployeeMagic’,                                      mainStyle : { ‘margin’ : ‘20px’ }                            }      }) </script>

Now we need to tell Vue where to use that styling property in our template. We’ll create a new container div tag to wrap around the rest of our app. In that tag we need to tell Vue to assign the styling we’ve defined in mainStyle. To do this we can use a Vue directive called v-bind:style and assign it the name of style object we want to use.

<body>

     <div id=“app”>

         <div v-bind:style=“mainStyle”>

             <h1>{{ appTitle }}</h1>

         </div>

     </div>

</body>

Save and refresh in Chrome and you’ll see the margin has been applied. I personally love this feature of Vue and there are lots more you can do to apply styling which we’ll cover later in the tutorial.

It’s interesting to note that when using directives such as v-bind:style, Vue offers a more shorthand way by dropping the v-bind. If Vue just sees :style it knows what to do, so we could have used ...

<div :style=“mainStyle”>

... instead. Throughout these tutorials I’ll continue to use the more verbose version to show the full directives consistently however where a new directive is shown, I’ll also highlight the shorthand version. Generally if you see v-bind followed by a colon and the command, you can drop the v-bind although there are exceptions that we’ll cover in a future part of the tutorial.

We’ve so far covered what VueJS and Firebase Cloud Firestore are, why we’re using them as the framework and platform for this app, and the basics of setting up a simple HTML page to build our employee tracker app, setting up our Vue object, basic data-binding and styling using a Vue directive.

In the next 4 parts of this tutorial we’ll focus on each element of CRUD (Create, Read or Retrieve, Update and Delete) so in part 2 we’ll deal with Creating records to store in our Firebase Cloud Firestore.

Hope you can join me in Part 2 :)

You can download the completed code for this part of the tutorial on Github using the repo below and select the part1 folder. https://github.com/MancDev/VueFire

[laravelvuejs]

Vue JS 2 Tutorial #25 – The Event Bus Hey gang, in this Vue JS tutorial I'll show you how we can create direct component to component data transfer using an event bus (which is just a Vue instance ... source

[geekymindsblog]

#RevisitJS Day 1

Follow @geekymindsblog for updates.

Let's get to know what you can actually do with JavaScript before we dive deeper.

Support GeekyMinds

If you want to support our work, all you have to do is complete the following developer survey by DevEconomics!

Survey Link: https://developereconomics.net/?member_id=LXYQ9y3K&lang=en

[udemy-gift-coupon-blog]

Master Vuejs from scratch ##FutureLearn ##UdemyFreeDiscountCoupons #Master #Scratch #VueJS Master Vuejs from scratch Are you a javascript / frontend developer looking forward to improve your fields ? Search no more ! Vuejs is the most popular javascript framework in 2018. Yes, it is, and it keeps increasing in popularity and more and more companies keep adapting it. Vue-js is really EASY TO LEARN. In this short 5-hour course, I will take you from beginner to master in vue-js. I will teach you everything you need to be able to build applications with vue-js. After taking this course, you will have and know everything you need to build your own real world vue-js applications. We are going to cover topics like Reactive vue data Displaying data Form data collection Displaying data sets Event handling Components Props Component reusability Asynchronous api calls JWT Authentication Login & Signup Pagination Loading state Error handling Frontend css frameworks integration Vue-cli Application deployment AND SO SO SO MUCH MOOORE !!!!!  You'll build real world projects and solutions in this course to be able to build your own projects. Go ahead and enroll into this course and start learning immediately. By this time tomorrow you can complete this course and add vue-js to your skill set. I'LL BE HERE TO SUPPORT YOU EVERY STEP OF THE WAY !!! Who this course is for: Beginner frontend developers looking to add a frontend javascript framework to their portfolios Advanced frontend developers looking to add Vue-js to their portfolios Backend developers willing to start on the frontend 👉 Activate Udemy Coupon 👈 Free Tutorials Udemy Review Real Discount Udemy Free Courses Udemy Coupon Udemy Francais Coupon Udemy gratuit Coursera and Edx ELearningFree Course Free Online Training Udemy Udemy Free Coupons Udemy Free Discount Coupons Udemy Online Course Udemy Online Training 100% FREE Udemy Discount Coupons https://www.couponudemy.com/blog/master-vuejs-from-scratch/

[mbaljeetsingh]

Building a Screenshot-Taking Tool’s Front-End UI Using Vue.js

Vue.js is an amazing JavaScript library that can be used to handle the front-end of all sorts of UIs besides just Single Page Apps. A screenshot-taking tool is the perfect example to showcase how powerful and easy to use Vue.js is.

A screenshot-taking tool is just a big number cruncher based on the position of the mouse and the dimensions of the screen. The numbers are calculated in the JS and then they get plugged into Vue.js which takes care of all the UI rendering without any extra crazy JavaScript DOM manipulation.

In this tutorial I’m going to show you how to build the front-end UI of something like this where you can drag your mouse to select a portion of the screen to save it as a screenshot using Vue.js.

Breaking Down the UI Into 3 Individual Parts

There are only 3 core parts necessary to getting a UI like this up and running. The container, the crosshairs, and the overlay.

1. The Container

This is where the Vue.js instance will be instantiated. It’s an element without any visual styles. The purpose of this element is to take care of the mouse event handling and rendering the data properties to update the UI in real-time.

The Vue Template

<div id="screenshot" class="container"> <div class="overlay"></div> <div class="crosshairs"></div> </div>

The Javascript

var screenshot = new Vue({ el: "#screenshot" });

2. The Crosshairs

A screenshot tool isn’t a screenshot-tool without crosshairs. This is a purely a visual element. The purpose is to clearly show the user where they currently are on the page and where they’re about to begin dragging the mouse from.

The position of the crosshairs element is rendered by explicitly setting the top and left position on the style attribute when the mouse moves.

This is where using Vue.js is so powerful. All the JavaScript code needs to concern itself with it is grabbing those left and right properties, saving them as data properties in the Vue instance, bind them using Vue.js’s binding syntax and the UI automatically updates.

Adding the crossHairsLeft and the crossHairsTop data properties to the Vue instance and the position will be saved on those properties.

Adding a mousemove event on the container element and then setting those two properties to the mouse’s position is where those values will come from.

The Vue Template for handling the crosshairs

<div @mousemove="move"> <div class="overlay"></div> <div class="crosshairs" :style="{ left: crossHairsLeft + 'px', top: crossHairsTop + 'px' }"></div> </div>

The Javascript to handle moving the crosshairs around

var screenshot = new Vue({ el: "#screenshot", data: { crossHairsLeft: 0, crossHairsTop: 0 }, methods: { move: function (event) { this.crossHairsTop = event.clientY; this.crossHairsLeft = event.clientX; } } });

The Overlay

The overlay is the opaque background element that appears when the crosshairs are being moved or when the mouse is being dragged. It’s another purely visual element. When the mouse is dragged the selected area completely loses its opacity and turns white to see what area of the page will be taken a screenshot of. That will be taken care of with the borderWidth property.

Clicking on the Overlay to Get Starting Mouse Position Values

When the user clicks down the initial x and y start values of the mouse need to be captured and saved. That can be done by adding a mousedown event to the container and adding two extra properties to the Vue instance. startX and startY.

Updated Vue Template

<div @mousemove="move" @mousedown="mouseDown"> <div class="overlay"></div> <div class="crosshairs" :style="{ left: crossHairsLeft + 'px', top: crossHairsTop + 'px' }"></div> </div>

The JavaScript

var screenshot = new Vue({ el: "#screenshot", data: { crossHairsLeft: 0, crossHairsTop: 0, startX: 0, startY: 0, isMouseDown: false }, methods: { move: function (event) { this.crossHairsTop = event.clientY; this.crossHairsLeft = event.clientX; }, mouseDown: function (event) { this.startX = event.clientX; this.startY = event.clientY; this.isMouseDown = true; } } });

Dragging Down on the Overlay to Render the Selected Area

The opening that shows the selection of the page that will be taken as a screensho is rendered using a border. All the JavaScript code does is calculate the appropriate border-width using the dimensions of the screen and the initial start x and y positions.

The two new properties that are needed are a borderWidth property that will be a calculated string of border width values. And then, an isDraggingMouse boolean property to determine if the user has started dragging while clicking. That’ll be used to hide the crosshairs only after the user has started dragging rather than as soon as the click event fires.

The Vue Template

<div id="screenshot" class="container" @mousemove="move" @mousedown="mouseDown"> <div class="overlay" :class="{ 'highlighting' : isMouseDown }" :style="{ borderWidth: borderWidth }"></div> <div class="crosshairs" :class="{ 'hidden' : isDraggingMouse }" :style="{ left: crossHairsLeft + 'px', top: crossHairsTop + 'px' }"></div> </div>

The Javascript

var screenshot = new Vue({ el: "#screenshot", data: { crossHairsLeft: 0, crossHairsTop: 0, startX: 0, startY: 0, isMouseDown: false, isDraggingMouse: false }, methods: { move: function (event) { var startY = this.startY, startX = this.startX, endX = event.clientX, endY = event.clientY, windowWidth = window.innerWidth, windowHeight = window.innerHeight; this.crossHairsTop = event.clientY; this.crossHairsLeft = event.clientX; if (this.isMouseDown) { if (endX >= startX && endY >= startY) { this.isDragging = true; this.borderWidth = startY + "px " + (windowWidth - endX) + "px " + (windowHeight - endY) + "px " + startX + "px"; } } }, mouseDown: function (event) { this.startX = event.clientX; this.startY = event.clientY; this.isMouseDown = true; } } });

Releasing the mouse and taking the screenshot

Finally, taking the screenshot itself happens after the user releases their mouse.

The JavaScript Logic

Add @mouseup="mouseUp" to the container and the mouseUp function will take care of some necessary resets for getting ready to take another screenshot and call the function for taking the screenshot itself.

methods: { mouseUp: function (e) { this.borderWidth = 0; // resetting the overlay if (this.isDragging) { // Don't take the screenshot unless the mouse moved somehow. this.tookScreenShot = true; } this.isDragging = false; this.mouseIsDown = false; this.takeScreenshot(); }

The screenshot-taking functionality

A library called html2canvas will help with taking the screenshots. It converts the document, or an element of your choice, into a canvas. That canvas can then be manipulated, cropped, and finally turned into an image.

Grab the script here and add it to the page.

methods: { takeScreenshot: function () { html2canvas(document.querySelector('body')).then(canvas => { let croppedCanvas = document.createElement('canvas'), croppedCanvasContext = croppedCanvas.getContext('2d'); croppedCanvas.width = this.croppedImageWidth; croppedCanvas.height = this.croppedImageHeight; croppedCanvasContext.drawImage(canvas, this.startX, this.startY, this.croppedImageWidth, this.croppedImageHeight, 0, 0, this.croppedImageWidth, this.croppedImageHeight); this.imageUrl = croppedCanvas.toDataURL(); }); } }

Conclusion

That’s about all that’s needed to get started with creating the front-end UI for a Screenshot-taking tool that could be used for a Chrome Extension.

From here on out it’s just a bunch of Math and if statements based on the positioning of the cursor and the screen dimensions to calculate everything correctly.

The most important thing that I wanted to showcase with this tutorial is that Vue.js is a powerful library that can be used to help all kinds of UI-related constructions and not just SPAs.

Reference

Want to see a completed version of this Screenshot-taking tool with the styles in place? Take a look at the Codepen here.

💻🔫

via Alligator.io http://ift.tt/2oLnVWc

[ittrainingcourse]

Top Essential Skills for React Web Developer | ExcelPTP

React is the ultimate library for front-end developers today. Simply put, you get better at development when you learn React, and many organizations view these skills as essential. JavaScript is the major driver of modern web applications since it’s the only programming language which runs in the browser and hence allows you to provide highly reactive apps. React is all about components- basically custom HTML elements-with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it and  re-use it as often as needed.

1. HTML + CSS

No front-end dev is a stranger to HTML and CSS. The ability to work with and craft user interface is necessary to every organization. At high level, React developers should be able to:

1. Work with and write semantic HTML tags

2. Work with and Write CSS selectors

3. Implement a CSS reset

4. Understand the box model and how to reset to border-box

5. Understand flexbox

6. Work with and implement responsive web principles including the proper user of media queries

2. React JS and Redux —- Mastering Web Apps

This project- based course will have you coding right away. Building four carefully Thought-out example applications in this course will sharpen your skills in modern web development. As one of the most highly-paid skills for web developers, learning react will Open doors and jobs for you. Create the React JS & Redux apps you always wanted.

First, learn the principles of React JS by building two applications. One introduce ES6/Babel, and the other how to handle HTTP Web Requests in React using an API. with the third application, learn how to manipulate browser cookies. Finally, you’ll create an entire app with full authentication and a real-time database to finish it off.

3.  Git:

Git is essential to every developer toolkit for storing projects on Solutions like GitHub, Bit bucket and GitLab. Git is magic sauce that allows you to track and host versions of files on Github.  In the words, you use commands of Git to track version of your files. And Github is Just a remote platform where these files are hosted. Skills that should just be part of your day to day include:

1. Tracking changes with add, commit, push and pull

2. Branching and merging strategies

3. Handling merge conflicts

4.  Node + npm

NPM(Node Package Manager) is the default package manager for Node.js and is written entirely in JavaScript. NPM Manage all the packages and modules for Node,js and consists of command line client npm. It gets installed into the system with installation of Node.js. A package contains all the files needed for a module and module are the JavaScript libraries that can be included in Node Project according to the requirement of the project. React developers need to have a solid understanding of the npm registry. This is the place where software developers can go to get software to help them build software. Node package Manager(NPM) provides two main functionalities –

1. Online repositories for node.js packages/modules which are searchable on search.nodejs.org

2. Command line utility to install Node.js Packages, do version management and dependency management of Node.js packages.

5.  Complete React JS web developer with ES6-Build 10 Projects

React is having very high demand in market. One of the top most searched subject on stack overflow. Most of high performance apps are created using react. If you want to stand apart from react, for sure you need to get familiar with react.

Also, if you are looking to move in react-native app development, that path goes with react js. Once you are familiar with concepts like JSX, props and states, same concepts are applied in react native too. And moving into react-native would be just a piece of cake.

This course will first cover local installation and react basics. After that we will create 10 projects

1. Project 1 – Create react app manually

2. Project 2 – Converting a simple Blog into react components

3. Project 3 – Timer App

4. Project 4 – sales cart in Single Page Application

5. Project 5 – Usurvery with Firebase database

6. Project 6 – Firebase Login Setup

7. Project 7 – Google Sign in with Firebase

8. Project 8 – Reddit API with axios

9. Project 9 – Auth0 login System

10. Project 10 – Github API with Fetch and Auth0 login System

6.  React JS  — Build real world JS apps & deploy on cloud

React JS is an awesome JS Framework for building front end Applications. React JS is leading Over Angular JS or vue JS. This is a truly complete React Js course, that goes way beyond what other React Courses out there teach you.

You will learn “why” something works in React, not Just “how”. Because in the modern JavaScript world of today, you need more than just knowing how something works. You need to debug code, you need to understand code, you need to be able to think about code.

So, by the end of the course, you will be a capable react developer, able to write, understand and debug JavaScript code using all the powerful features the language offers to code your application using React js.

This Course will take you from a complete React Js beginner to an advance developer. You will not just learn the React itself, you will also learn how to program. How to solve problems. How to Organized  code using common standard/patterns.

7.  React From The Ground UP

React is a hugely in demand framework and having the knowledge of react that this course will teach you will set you apart from other candidates. This tutorial will take you through everything you need to master web development using ReactJS.

If you’ve got a great idea that you want to turn into a business react is a great choice to build your application with and React from the Ground Up will teach you everything you need to make amazing application with React.

Getting a great understanding of React JS will get you into position to build fantastic, well built personal and professional projects.throughout the course you will build mini projects with React then move onto build a Pokemon dashboard application that will pit your new found React skills into practice. We will then build an application that teaches you all the principles behind Redux and how you can confidently and easily use React with Redux to build applications.

8.  React for Absolute Beginners

React has simplified not only the process of designing UIs but also make it easier to build complete projects that are real-time and dynamic.JavaScript plays an important role when it comes to designing and deploying apps and websites.

This epic react course not only helps break down the Fundamentals of React, but also dives deep into how React works and the actual coding process that is required. At the end of this course, you will have a through working idea of react and you’ll even be able to build your own small projects.

This course strips the complicated bits and pieces of React that are scary and simplifies it to make it easier to understand. Starting at the very beginning with the basic definitions of React and it’s core components. From there you’ll breakdown the important aspects of React such as JSX, looping, ES, Bug Fixing, States, Props, libraries, Actions, Redux, and so much more.

At the end of this course, you will have a more sound knowledge of React and it’s components such as JSX, Redux, etc. and you’ll also be able to actually integrate React with your own working project.

What you’ll learn in this course:

1. A complete introduction to React and it’s core components.

2. Introduction to JSX

3. Learning to build your very first component

4. Event looping & bug fixing

5. Going over State & Props including how to pass data around inside or between components

6. Introduction to data, libraries and APIs

7. Other Important concepts such as Redux, Actions, Reducers, etc.

8. Build your own app with everything you’ve learnt through the course.

[codetriks]

How To Set Ticket Submit Button Status In Zendesk

​How To Set Ticket Submit Button Status In Zendesk

Hi I have written and developed this site so that students may learn computer science related technologies easily. I am committed to provide easy and in depth tutorials on various technologies. No one is perfect in this world and nothing is impossible. I give my best for you. I hope it will help you….Thanks

Codetriks is an educational website which is provide  IT Tutorial .

In IT we provide Jquery,Mvc,c#.net,Asp.net,SQL,Zendesk,Dapper,Vue Js Tutorial for beginners so learn and increase your knowledge with us.

Codetriks provide IT tutorials – Codetriks | Jquery AJAX ,Jquery Basic,Jquery Selectors,Curd Operation using Jquery,Insert using jquery,Update using Jquery,Delete using jquery,Jquery grid,Jquery JTemplate,check uncheck checkbox using jquery,jquery onclick events,jquery Insert update delete code,jquery table ,jquery css,jquery foreach function,jquery tutorial,jquery sample demo,jquery examples Our  website provide codes for every technology so please use this website. And also give me feedback how you feel.

Codetriks is a no 1 website for provide easy codes and build website very easy method. If you are a devloper then we also help you because we also provide, How to solve error and warnings so please use it and save your time and make money with us…

Thank you…

[toddbirchard-architect]

Using Gulp to Make Frontend Tolerable

Automate the lame stuff

Alright fine, so maybe the whole obligatory-gulp-tutorial-on-some-coding-blog thing has become a bit cliché at this point. Hate all you want, but I 'll take all the traffic from keywords I can get at this point. Keywords such as Gulp, or ExpressJS, or NodeJS, or React Vue frontend ubuntu installation API social cloud data entrepreneur community. Hopefully this serves as a good reference regardless, like when we copy/paste our gulpfiles from project to project and forget what they actually do. Quick 101 NodeJS developers use Gulp to automate necessary processes before moving their frontend code to production. This includes minifying files to make them run faster, and to also make them unreadable to people who would otherwise make fun of your mediocre Javascript which you were forced to crank out on a short timeline. General Workflow Let's say you're running a basic Express app. As opposed to developing and storing files in a directory such as /public, Gulp enables us to develop in one directory, and compile to another. That means we can keep our horrible uncompressed and uncompiled source in a folder such as /src, and output them to a directory such as /dist, which would be our public-facing output. An Express file structure utilizing this would look something like this: |- src/ |- js/ |- scss/ |- dist/ |- js/ |- css/ |- img/ |- fonts/ |- views |- index.hbs |- routes |- index.js |- gulpfile.js |- node_modules/ |- package.json |- app.js Installation First install the gulp CLI: npm install --global gulp-cli Next, enter your project folder and install gulp while saving it as a project dependency. npm install --save gulp How it Works Without any plugins, Gulp doesn't do anything on its own. Gulp is essentially a process wrapper which executes the tasks you so desire; this entails a bit of setup, but it also makes Gulp highly customizable to your needs. The Gulpfile Gulp works by invoking a file called gulpfile.js in your main directory, which you'll need to create and set up yourself (sorry). The file is divided into two main parts: requiring (importing) plugins, and defining which tasks to run when gulp is invoked. A basic worthless gulpfile might look something like: var gulp = require('gulp'); gulp.task('default', function () { console.log('Sup World!'); }); To make this file useful, we'll need to install more plugins and set up tasks for them. Essential Plugins Let's look at what each one does. Keep in mind there are thousands of Gulp plugins, so let's just touch on the big hitters here. Keep in mind to install any of these plugins, you'll simply need to run the npm installation in your project directory: npm install --save [plugin name] gulp-uglify Minifies Javascript or CSS files, and outputs the result into the directory of your choice. This plugin can be reused across filetypes, as we'll demonstrate in a moment. gulp-concat Combines minified files into a single file. This is essential for browser performance as it reduces the number of http requests being made every time your page loads. gulp-rename Renames files (such as those produced by gulp-concat). gulp-sass / gulp-less Compiles your Sass or Less files into CSS and outputs to the directory of your choice. gulp-minify-css Minifies CSS, as you might imagine. This can chained to gulp-sass or gulp-less to minify the CSS files those tasks produce. gulp-autoprefixer Thank god for this. Autoprefixer finds CSS styles and adds the browser-specific equivalents to your CSS, so you don't need to write the same style 10 times for every horrible browser in existence. This means you can write styles such as: background: linear-gradient(to bottom, white, black); And have them output as: background: -webkit-gradient(linear, left top, left bottom, from(white), to(black)); background: -webkit-linear-gradient(top, white, black); background: -o-linear-gradient(top, white, black); background: linear-gradient(to bottom, white, black); gulp-watch Allows Gulp to listen for changes being made to source files, so that it may fire an event upon file change, such as: gulp-livereload Compiles the changes made in directories being watched via gulp-watch automatically while you work. Next Level Pro Shit While these plugins aren't 'essential', they are really cool and helpful. gulp-sourcemaps An obnoxious side effect of minifying and concating your files is when it comes time to debug errors on the frontend. Errors occurring at "line 235" are pretty useless considering your error codes are referring to the compiled files, without granting a hint as to where the problematic code may have come from in the first place. gulp-sourcemaps resolves this by adding commenting paths to which source files your code originated from. gulp-browser-sync By leveraging BrowserSync , this plugin immediately refreshes an open browser which links to files just changed by gulp. This means you can code, comile, and see the results in real time. This takes a bit extra effort to set up, so be sure to check their documentation . gulp-load-plugins Normally when creating our gulpfile, we need to start off by requiring our plugins via something like this: var gulp = require('gulp'), del = require('del'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), watch = require('gulp-watch'), livereload = require('gulp-livereload'), minifyCss = require('gulp-minify-css'), autoprefixer = require('gulp-autoprefixer'); gulp-load-plugins instead checks your package.json for any Gulp plugins and immediately requires them, thus saving you a few precious minutes. The output instead looks like: var $ = require('gulp-load-plugins')(); Building The Gulpfile Now that we have all these dope plugins, we can finally build our gulpfile. Here's an example (without using gulp-load-plugins for now): var gulp = require('gulp'), del = require('del'), concat = require('gulp-concat'), rename = require('gulp-rename'), uglify = require('gulp-uglify'), sass = require('gulp-sass'), watch = require('gulp-watch'), livereload = require('gulp-livereload'), minifyCss = require('gulp-minify-css'), autoprefixer = require('gulp-autoprefixer'); gulp.task('styles', function() { return gulp.src('src/sass/*.scss') .pipe(sass({outputStyle: 'expanded', unix_newlines: true, linefeed: "lf"}).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(minifyCss({ keepSpecialComments: 1 })) .pipe(rename("theme.min.css")) .pipe(gulp.dest('./assets/css/')); }); gulp.task('scripts', function() { return gulp.src(['src/js/plugin/*.js', 'src/js/base.js']) .pipe(uglify()) .pipe(concat('theme.min.js')) .pipe(gulp.dest('assets/js')); }); gulp.task('ghost_config', ['scripts'], function() { return gulp.src(['src/js/config.js', 'assets/js/theme.min.js']) .pipe(concat('theme.min.js')) .pipe(gulp.dest('assets/js')); }); gulp.task('default', function() { gulp.start('styles', 'scripts', 'ghost_config', 'watch'); }); gulp.task('watch', function() { gulp.watch('src/sass/*.scss', ['styles']); gulp.watch('src/js/*.js', ['scripts', 'ghost_config']); livereload.listen(); gulp.watch(['*']).on('change', livereload.changed); }); Just by looking at the file itself, you may be able to dissect what's happening here. After we require our plugins, we define our tasks, which are essentially individual jobs consisiting of one or more gulp plugins depending on how you've chained them. Here's the general terminology to help clear things up: gulp.task : Defines a task consisting of one of more plugin actions. gulp.src :  Specifies the folder containing source files. gulp.dest : Defines the folder to output compiled files to. pipe() : Allows multiple events to be chained together in a single task. Wrapping up Once your file is ready to go, simply run the grunt command in your project directory. You should see Gulp output the status of each task you've set, as well as any errors which may have occured. In short, just use Gulp. The scientific community has come to a consensus that Gulp is objectively superior to its counterpart, Grunt. Ask Matt, he's a scientist. Peace fam!

- Todd Birchard Read post